<template>
	<view>
		<u-popup :show="show" mode="bottom" bgColor="transparent" @close="show = false" :safeAreaInsetBottom="false">
			<view class="popup">
				<view class="nav flex_r_between" @click="show = false">
					<view class="icon flex_r_around">
						<u-icon bold name="arrow-left" size="32rpx" color="#3D3D3D"></u-icon>
					</view>
					<text>{{ info.name }}</text>
					<view class="icon"></view>
				</view>
				<view class="mengceng1"></view>
				<view class="mengceng2"></view>
				<scroll-view scroll-y="true" @scrolltolower="onReach">

					<view class="gift-info flex_c">
						<image :src="info.image" mode="aspectFill" class="gift-image"></image>
						<view class="gift-gold flex_center">
							<image src="/static/recharge/gold_coins.png" mode="aspectFill"></image>
							<text>{{ info.jinbi_price }}</text>
						</view>
						<view class="gift-text">
							已点亮{{ info.num }}次
						</view>
					</view>

					<view class="flex_r_around">
						<view class="gift-title flex_center">
							<image :src="$util.prefix('live/gift_grid_title_left.png')"></image>
							<text>点亮榜</text>
							<image :src="$util.prefix('live/gift_grid_title_right.png')"></image>
						</view>
					</view>

					<view class="gift-people-list">
						<view class="item flex_center" v-for="(item,index) in list" :key="index">
							<view class="index">{{ index+1 }}</view>
							<image :src="item.avatar" mode="aspectFill"></image>
							<view class="name hidden">{{ item.nickname }}</view>
						</view>
					</view>

				</scroll-view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {
				page: 1,
				total: 1,
				list: [],

				info: {

				},

				show: false,

				user_id: 0,
				gift_id: 0,

			}
		},
		methods: {
			onReach() {
				if (this.total > this.list.length) {
					this.page++;
					this.$get('/gift/getGiftStatusDetail', {
						user_id: this.user_id,
						gift_id: this.gift_id,
					}).then(res => {
						this.list.push(...res.data.list.data);
						this.total = res.data.list.total;
					});
				}
			},

			open() {
				this.list = [];
				this.page = 1;
				this.total = 1;

				this.$get('/gift/getGiftStatusDetail', {
					user_id: this.user_id,
					gift_id: this.gift_id,
				}).then(res => {
					this.info = res.data.info;
					this.list.push(...res.data.list.data);
					this.total = res.data.list.total;
					this.show = true;
				});
			}


		},

		created() {

		}
	}
</script>

<style lang="less" scoped>
	.popup {
		width: 100vw;
		height: 80vh;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: relative;
		overflow: hidden;

		scroll-view {
			height: calc(80vh - 108rpx);
		}
	}

	.mengceng1 {
		width: 362rpx;
		height: 362rpx;
		background: #E5F7FE;
		filter: blur(23rpx);
		position: absolute;
		top: -180rpx;
		left: 32rpx;
		z-index: 1;
		opacity: 0.6;
		pointer-events: none;
	}

	.mengceng2 {
		width: 362rpx;
		height: 362rpx;
		background: #F7EBFB;
		filter: blur(23rpx);
		position: absolute;
		top: -180rpx;
		right: 32rpx;
		z-index: 1;
		opacity: 0.6;
		pointer-events: none;
	}

	.nav {
		position: relative;
		z-index: 10;
		height: 108rpx;
		background: transparent;

		.icon {
			width: 108rpx;
			height: 108rpx;
		}

		text {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}
	}

	.gift-info {
		position: relative;
		z-index: 2;

		.gift-image {
			width: 224rpx;
			height: 224rpx;
		}

		.gift-gold {
			height: 56rpx;
			background: #F4F0FF;
			border-radius: 28rpx;
			padding: 0 28rpx;
			margin: 8rpx 0 16rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 2rpx;
			}

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
			}
		}

		.gift-text {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}
	}

	.gift-title {
		margin: 48rpx 0 28rpx;

		text {
			font-weight: 500;
			font-size: 28rpx;
			color: #3E00CD;
			line-height: 40rpx;
			margin: 0 16rpx;
		}

		image {
			width: 138rpx;
			height: 24rpx;
		}
	}

	.gift-people-list {
		.item {
			padding: 12rpx 32rpx;

			.index {
				width: 80rpx;
				height: 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #131313;
				line-height: 40rpx;
				text-align: center;
			}

			image {
				width: 72rpx;
				height: 72rpx;
				border-radius: 36rpx;
				margin: 0 16rpx 0 6rpx;
			}

			.name {
				flex: 1;
				font-size: 28rpx;
				color: #131313;
				line-height: 40rpx;
			}
		}
	}
</style>